<template>
	<form>
		<view class="cu-form-group">
			<view class="title">工装照头像</view>
			<view class="cu-avatar radius bg-gray worker_avatar" :style="{backgroundImage:'url(' + worker_avatar + ')'}"
				@tap="ChooseImage('worker_avatar')"></view>
		</view>
		<view class="cu-form-group">
			<view class="title">真实姓名</view>
			<input placeholder="真实姓名" name="input" v-model="realName"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">手机号</view>
			<input placeholder="请输入11位手机号码" name="input" v-model="mobile"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">服务区域</view>
			<input type="text" placeholder="请选择服务区域" @tap="btnClick" :value="addressData.formatted_address"></input>
			<wanl-address ref='wanlAddress' @selectAddress="successSelectAddress"></wanl-address>
		</view>
		<view class="cu-form-group">
			<view class="title">工种类型</view>
			<picker @change="typeCateChange" :range="typeCateList" range-key="name">
				<view class="picker">
					{{workerCateType? workerCateType: '请选择确认服务工种' }}
				</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">服务内容</view>
			<picker @change="typeChange" :value="typeId" :range="typeList" range-key="name">
				<view class="picker">
					{{workerType?workerType:'请选择确认服务内容'}}
				</view>
			</picker>
		</view>

		<view class="cu-bar bg-white margin-top">
			<view class="action">
				请上传身份证正反面照片
			</view>
		</view>
		<view class="cu-form-group">
			<view class="col-4 grid-square flex-sub" style="display: flex;flex-direction: row;">
				<view class="id-card">
					<image class="id-card-img" :src="fron_id_card_image" @tap="ChooseImage('fron_id_card_image')">
						<view class="id-card-dec">上传身份证人像面</view>
				</view>
				<view class="id-card" style="margin-left: 2%;">
					<image class="id-card-img" :src="reverse_id_card_img" @tap="ChooseImage('reverse_id_card_img')">
						<view class="id-card-dec">上传身份证国徽面</view>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white margin-top">
			<view class="action">
				请上传资质/经验证明
			</view>
		</view>
		<view class="cu-form-group">
			<view class="col-4 grid-square flex-sub" style="display: flex;flex-direction: row;">
				<view class="desc">
					<text>
						您可以上传其他同类型平台的“服务订单数”、“收入”“服务分数”等截图作为您的经验证明
					</text>
				</view>
			</view>
		</view>
		<view class="cu-form-group" style="border: 0ch;">
			<view class="title">所属平台</view>
			<input placeholder="请输入其他平台名称" name="input" v-model="platFormName"></input>
		</view>
		<view class="cu-bar bg-white" style="border-top: 0.5px solid #eee;">
			<view class="action">
				<strong>上传经验证明图片（1-5张）</strong>
			</view>
			<view class="action">
				{{imgList.length}}/5
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage"
					:data-url="imgList[index]">
					<image :src="imgList[index]" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage('imgList')" v-if="imgList.length<4">

				</view>
			</view>
		</view>
		<view class="cu-form-group" style="border: 0ch;padding-bottom: 5%;">
			<button class="cu-btn round register-btn" @click="toRegister"
				:style="{background:register_background}">确认提交</button>
		</view>
		<view class="cu-load load-modal" v-if="loadModal">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="https://img.aibbyp.com/wechat/images/default/screen_icon_new.png" mode="aspectFit"></image>
			<view class="gray-text">{{loadingText}}...</view>
		</view>
	</form>
</template>

<script>
	export default {
		name: "worker-register",
		data() {
			return {
				user_worker_id: 0,
				loadingText: '上传中，请稍后',
				register_background: '#FAB2B1',
				realName: '',
				mobile: '',
				platFormName: '',
				index: -1,
				typeId: 0,
				picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'],
				addressData: {
					name: '',
					mobile: '',
					default: 0,
					//地区
					country: '', // 国家
					province: '', //省份
					city: '', // 城市
					citycode: '', // 城市代码
					district: '', // 县
					adcode: '', // 地区代码
					formatted_address: '', //详细地区
					//详情
					address: '', //详细地址
					address_name: '', // 地址名称
					location: '' //经纬度
				},
				//工种类型
				typeCateList: [],
				typeCatePickerIndex: 1,
				workerCateType: '', // 在picker列表所选中项的id
				typeCateId: 0,
				//工种
				typeList: [{
					id: 0,
					name: '请先选择工种类型'
				}],
				typePickerIndex: 1,
				workerType: '',
				imgList: [],
				imgListUrls: [],
				//工装头像
				worker_avatar: 'https://img.aibbyp.com/wechat/images/artison/register/gong.png',
				worker_avatar_url: '',
				//身份证人像照
				fron_id_card_image: 'https://img.aibbyp.com/wechat/images/artison/register/fron_id_card_image.png',
				fron_id_card_image_url: '',
				//身份证国徽照
				reverse_id_card_img: 'https://img.aibbyp.com/wechat/images/artison/register/reverse_id_card_img.png',
				reverse_id_card_img_url: '',
				CustomBar: this.CustomBar,
				loadModal: false,
				worker_id: 0
			};
		},
		onLoad(option) {
			this.worker_id = option.id
		},
		mounted() {
			console.log('---<<<<')
			this.getTypeCateList();
			this.getWorkerInfo();
		},
		methods: {
			btnClick() {
				this.$refs.wanlAddress.show();
			},
			successSelectAddress(address) {
				this.addressData.formatted_address = address.province + " " + address.city + ' ' + address.district;
			},
			typeCateChange(e) {
				const index = e.target.value;
				this.workerCateType = this.typeCateList[index].name;
				this.typeCateId = this.typeCateList[index].id;
				this.getWorkerTypeByCateId(this.typeCateId)
			},
			typeChange(e) {
				const index = e.target.value;
				this.workerType = this.typeList[index].name;
				this.typeId = this.typeList[index].id;
			},
			getTypeCateList() {
				console.log('---')
				this.$api.get({
					url: '/jmy/worker_type/getTypeCateList',
					success: res => {
						this.typeCateList = res;
					}
				});
			},
			getWorkerTypeByCateId(cateId) {
				this.$api.post({
					url: '/jmy/worker_type/getListByType',
					data: {
						type: cateId,
					},
					success: (res) => {
						this.typeList = res;
						if (this.workerType.length > 0) {
							this.workerType = res[0].name;
						}
					}
				});
			},
			ChooseImage(event) {
				uni.chooseImage({
					count: 5, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册,相机选择
					success: (res) => {
						if (event == 'imgList') {
							for (var i = 0; i < res.tempFilePaths.length; i++) {
								this.uploadImage(event, res.tempFilePaths[i]);
							}
						} else {
							this.uploadImage(event, res.tempFilePaths[0]);
						}
					},
					fail: (err) => {
						uni.getSetting({
							success: (res) => {
								let authStatus = res.authSetting['scope.album'];
								if (!authStatus) {
									this.$wanlshop.msg("䒵饰APP需要从您的相册获取图片，请在设置界面打开相关权限")
								}
							}
						})
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '您好',
					content: '确定要删除该图片吗？',
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
							this.imgListUrls.splice(e.currentTarget.dataset.index, 1);
						}
					}
				})
			},
			uploadImage(event, filePath) {
				this.LoadModal();
				this.$api.upload({
					url: '/common/upload',
					filePath: filePath,
					name: 'file',
					success: res => {
						switch (event) {
							case 'worker_avatar':
								this.worker_avatar = this.$wanlshop.oss(res.url);
								this.worker_avatar_url = res.url;
								break;
							case 'fron_id_card_image':
								this.fron_id_card_image = this.$wanlshop.oss(res.url);
								this.fron_id_card_image_url = res.url;
								break;
							case 'reverse_id_card_img':
								this.reverse_id_card_img = this.$wanlshop.oss(res.url);
								this.reverse_id_card_img_url = res.url;
								break;
							case 'imgList':
								this.imgList = this.imgList.concat(this.$wanlshop.oss(res.url));
								this.imgListUrls = this.imgListUrls.concat(res.url);
								this.register_background = "#FF4530";
								break;
						}
						this.loadModal = false;
					}
				});
			},
			LoadModal(e) {
				this.loadModal = true;
			},
			toRegister() {
				try {
					var requestData = {
						user_worker_id: this.user_worker_id,
						avatar: this.worker_avatar_url,
						real_name: this.realName,
						worker_mobile: this.mobile,
						worker_id: this.worker_id,
						area: this.addressData.formatted_address,
						type: this.typeCateId,
						worker_type_id: this.typeId,
						front_id_card_image: this.fron_id_card_image_url,
						reverse_id_card_img: this.reverse_id_card_img_url,
						plat_form_name: this.platFormName,
						img_list: this.imgListUrls
					}
					console.log(requestData)
					if (requestData.avatar.length == 0) {
						throw "请上传工装照头像";
					}
					if (requestData.real_name.length == 0) {
						throw "请填写真实姓名";
					}
					if (requestData.worker_mobile.length == 0) {
						throw "请填写手机号";
					} else {
						var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
						var result = reg.test(this.mobile);
						if (!result) {
							throw "手机号码格式错误";
						}
					}
					if (requestData.area.length == 0) {
						throw "请选择服务区域";
					}
					if (requestData.worker_type_id == 0) {
						throw "请选择服务内容";
					}
					if (requestData.front_id_card_image.length == 0) {
						throw "请上传身份证正面照";
					}
					if (requestData.reverse_id_card_img.length == 0) {
						throw "请上传身份证背面照";
					}
					if (requestData.img_list.length == 0) {
						throw "请至少上传一张证明图片";
					}
					let url = this.worker_id == 0 ? '/jmy/user/register' : '/jmy/user_worker/registerWorker'
					this.$api.post({
						url: url,
						data: requestData,
						success: (res) => {
							if (this.worker_id == 0) {
								this.goOK(res)
							} else {
								this.$wanlshop.msg('提交成功')
								setTimeout(() => {
									uni.reLaunch({
										url: `/pages/tabbarcompotant/index/landlord`
									});
								}, 500)
							}
						}
					});
				} catch (e) {
					//TODO handle the exception
					this.$wanlshop.msg(e)
				}
			},
			goOK(res) {
				this.$wanlshop.msg('注册成功')
				uni.hideLoading();
				this.$store.dispatch('user/login', res);
				this.$store.dispatch('cart/login');
				uni.reLaunch({
					url: `/pages/tabbarcompotant/index/landlord`
				});
			},
			getWorkerInfo() {
				this.$api.post({
					url: '/jmy/user_worker/getInfo',
					success: (res) => {
						console.log(res);
						if (res.length !== 0) {
							this.user_worker_id = res.id;
							// 图片
							this.worker_avatar = this.$wanlshop.oss(res.avatar);
							this.worker_avatar_url = res.avatar;
							this.fron_id_card_image = this.$wanlshop.oss(res.id_card.front_id_card_image);
							this.fron_id_card_image_url = res.id_card.front_id_card_image;
							this.reverse_id_card_img = this.$wanlshop.oss(res.id_card.reverse_id_card_img);
							this.reverse_id_card_img_url = res.id_card.reverse_id_card_img;
							var proveFullImgs = [];
							var proveImages = [];
							for (var i = 0; i < res.prove_imgs.length; i++) {
								proveFullImgs = proveFullImgs.concat(this.$wanlshop.oss(res.prove_imgs[i]));
								proveImages = proveImages.concat(res.prove_imgs[i]);
								// console.log(res.prove_imgs[i]);	
							}
							this.imgListUrls = proveImages;
							this.imgList = proveFullImgs;
							// 图片-----
							this.realName = res.real_name;
							this.mobile = res.mobile;
							this.addressData.formatted_address = res.worker_area;
							this.workerCateType = res.type_name;
							this.workerType = res.work_name;
							this.platFormName = res.other_platform;
							this.typeId = res.work_type_ids;
							this.register_background = "#FF4530";
						}
					}
				});
			}
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.cu-form-group input {
		text-align: right;
	}

	.worker_avatar {
		border-radius: 50%;
		margin-right: 3%;
	}

	.id-card {
		display: flex;
		flex-direction: row;
		height: 200px;
	}

	.id-card {
		height: 300upx;
		width: 49%;
		display: flex;
		flex-direction: column;
	}

	.id-card-img {
		height: 210upx;
		width: 100%;
	}

	.id-card-dec {
		font-family: 思源黑体;
		font-size: 12px;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		font-feature-settings: "kern" on;
		color: #3D3D3D;
		text-align: center;
		padding-top: 20upx;
	}

	.desc {
		width: 100%;
		height: 73px;
		opacity: 1;
		background: #FFF4EC;
		padding: 3% 3%;
		font-family: Source Han Sans;
		font-size: 13px;
		font-weight: normal;
		line-height: 26px;
		letter-spacing: 0em;

		font-feature-settings: "kern" on;
		color: #777476;
	}

	.solids {
		background-image: url("https://img.aibbyp.com/wechat/images/artison/register/unpload.png");
		background-position: right bottom, left top;
		background-repeat: repeat;
		background-size: cover;
	}

	.register-btn {
		width: 100%;
		height: 100upx;
		font-family: Source Han Sans;
		font-size: 16px;
		font-weight: 500;
		line-height: 26px;
		letter-spacing: 0em;

		font-feature-settings: "kern" on;
		color: #FFFFFF;
		z-index: 0;
	}
</style>